import react from 'react';
import './index.less';
import { DashboardProps } from '@/model/Dashboard';
import Menu from '@/components/menu/Menu';
import { Avatar } from 'antd';
import { Outlet } from 'react-router-dom';

const Dashboard = ({ title, type = "layout-verticality", children }: DashboardProps) => {
    return <div className={type}>
        <div className='layout-menu'>
            <div className='menu-list'>
                <div className='left-title'>{title ? title : <span style={{color:'#0086cd',fontSize:22}}><span>Iortho</span> Demo</span>}</div>
                <div>
                    <Menu></Menu>
                </div>
            </div>
            <div className='right-title'>
                <Avatar style={{ backgroundColor: '#f56a00', verticalAlign: 'middle',cursor:'pointer' }} size="large" gap={4}>
                    A
                </Avatar>
            </div>
        </div>
        <div className='layout-content'>
            {type === '' && <div className='right-header'>
                <div className='user'></div>
            </div>}
            <div className='content'>
                {
                    children ? children : <Outlet />
                }
                
            </div>
        </div>

    </div>
}

export default Dashboard;